<!DOCTYPE html>
<html class="loading" lang="zh" data-textdirection="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="author" content="PIXINVENT">
<title>库存展示</title>
<link rel="stylesheet" type="text/css" href="app-assets/css/vendors.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="app-assets/css/bootstrap-extended.css">
<style>
  .stock-high { color: #28a745; font-weight: bold; }
  .stock-medium { color: #ffc107; font-weight: bold; }
  .stock-low { color: #dc3545; font-weight: bold; }
  .stock-critical { color: #dc3545; font-weight: bold; background-color: #f8d7da; }
</style>
</head>
<body>
<div class="content-wrapper">
  <div class="content-header">
    <div class="content-header-left mb-2">
      <h3 class="content-header-title mb-0">库存展示</h3>
    </div>
  </div>
  <div class="card">
    <div class="card-content">
      <div class="card-body">
        <div class="searchbox">
          <form class="form-inline">
            <div class="form-group">
              <input type="text" class="form-control" id="productName" placeholder="商品名称">
            </div>
            <div class="form-group">
              <select class="form-control" id="categorySelect">
                <option value="">所有类别</option>
              </select>
            </div>
            <div class="form-group">
              <select class="form-control" id="supplierSelect">
                <option value="">所有供应商</option>
              </select>
            </div>
            <div class="form-group">
              <select class="form-control" id="stockStatus">
                <option value="">所有库存状态</option>
                <option value="high">库存充足</option>
                <option value="medium">库存适中</option>
                <option value="low">库存偏低</option>
                <option value="critical">库存不足</option>
              </select>
            </div>
            <div class="form-group">
              <button type="button" class="btn btn-primary" id="searchBtn">查询</button>
            </div>
          </form>
        </div>
        
        <div class="funcbtn clearfix">
          <div class="pull-left">
            <button class="btn btn-info" id="exportBtn">导出库存报表</button>
          </div>
        </div>
        
        <div class="tablebox1">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>商品图片</th>
                <th>商品ID</th>
                <th>商品名称</th>
                <th>商品品牌</th>
                <th>类别</th>
                <th>供应商</th>
                <th>当前库存</th>
                <th>库存状态</th>
                <th>安全库存</th>
                <th>单位</th>
                <th>最后更新</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody id="stockTableBody">
              <!-- 示例数据 -->
              <tr>
                <td><img src="app-assets/images/avatar.jpg" alt="商品图片" width="50"></td>
                <td>1001</td>
                <td>可口可乐500ml</td>
                <td>可口可乐</td>
                <td>饮料</td>
                <td>北京食品供应公司</td>
                <td>120</td>
                <td><span class="stock-high">库存充足</span></td>
                <td>50</td>
                <td>瓶</td>
                <td>2024-10-12</td>
                <td>
                  <button class="btn btn-sm btn-primary edit-stock">调整库存</button>
                </td>
              </tr>
              <tr>
                <td><img src="app-assets/images/avatar.jpg" alt="商品图片" width="50"></td>
                <td>1002</td>
                <td>雪碧500ml</td>
                <td>雪碧</td>
                <td>饮料</td>
                <td>北京食品供应公司</td>
                <td>45</td>
                <td><span class="stock-medium">库存适中</span></td>
                <td>30</td>
                <td>瓶</td>
                <td>2024-10-12</td>
                <td>
                  <button class="btn btn-sm btn-primary edit-stock">调整库存</button>
                </td>
              </tr>
              <tr class="stock-critical">
                <td><img src="app-assets/images/avatar.jpg" alt="商品图片" width="50"></td>
                <td>1003</td>
                <td>芬达橙味500ml</td>
                <td>芬达</td>
                <td>饮料</td>
                <td>北京食品供应公司</td>
                <td>8</td>
                <td><span class="stock-critical">库存不足</span></td>
                <td>20</td>
                <td>瓶</td>
                <td>2024-10-12</td>
                <td>
                  <button class="btn btn-sm btn-primary edit-stock">调整库存</button>
                </td>
              </tr>
              <tr>
                <td><img src="app-assets/images/avatar.jpg" alt="商品图片" width="50"></td>
                <td>1004</td>
                <td>康师傅红烧牛肉面</td>
                <td>康师傅</td>
                <td>方便食品</td>
                <td>广州食品供应公司</td>
                <td>75</td>
                <td><span class="stock-high">库存充足</span></td>
                <td>30</td>
                <td>袋</td>
                <td>2024-10-11</td>
                <td>
                  <button class="btn btn-sm btn-primary edit-stock">调整库存</button>
                </td>
              </tr>
            </tbody>
          </table>
 
          <div class="page clearfix">
            <div class="pull-left">共 120 条记录 第 1 / 12 页</div>
            <div class="pull-right">
              <nav aria-label="..." class="pull-left">
                <ul class="pagination">
                  <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
                  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#" aria-label="Next"><span aria-hidden="true">»</span></a></li>
                </ul>
              </nav>
              
              <div class="pull-left p-r-20 p-l-20">
                <select class="form-control">
                  <option>10条每页</option>
                  <option selected>20条每页</option>
                  <option>50条每页</option>
                </select>
              </div>
              <div class="pull-left">跳至<input type="text" value="1" class="form-control">页</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 库存调整模态框 -->
<div class="modal fade" id="adjustStockModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">调整库存</h4>
      </div>
      <div class="modal-body">
        <form>
          <input type="hidden" id="productId">
          <div class="form-group">
            <label>商品名称:</label>
            <input type="text" class="form-control" id="productNameModal" readonly>
          </div>
          <div class="form-group">
            <label>当前库存:</label>
            <input type="text" class="form-control" id="currentStock" readonly>
          </div>
          <div class="form-group">
            <label>调整数量:</label>
            <input type="number" class="form-control" id="adjustQuantity" placeholder="正数为增加，负数为减少">
          </div>
          <div class="form-group">
            <label>调整原因:</label>
            <select class="form-control" id="adjustReason">
              <option value="purchase">采购入库</option>
              <option value="return">退货入库</option>
              <option value="sale">销售出库</option>
              <option value="damage">损耗/破损</option>
              <option value="adjustment">库存调整</option>
              <option value="other">其他</option>
            </select>
          </div>
          <div class="form-group" id="otherReasonGroup" style="display:none;">
            <label>其他原因说明:</label>
            <input type="text" class="form-control" id="otherReason" placeholder="请输入原因">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="saveAdjustment">保存</button>
      </div>
    </div>
  </div>
</div>

<script src="app-assets/js/vendors.min.js" type="text/javascript"></script> 
<script src="app-assets/js/app-menu.js" type="text/javascript"></script> 
<script src="app-assets/js/app.js" type="text/javascript"></script> 
<script src="app-assets/js/echarts.min.js" type="text/javascript"></script>
<script src="app-assets/js/sweetalert2.js" type="text/javascript"></script>

<script>
  $(document).ready(function() {
    // 库存状态筛选
    $('#stockStatus').change(function() {
      const status = $(this).val();
      // 在实际应用中，这里会根据选择的库存状态筛选数据
      console.log('筛选库存状态:', status);
    });

    // 查询按钮事件
    $('#searchBtn').click(function() {
      const productName = $('#productName').val();
      const category = $('#categorySelect').val();
      const supplier = $('#supplierSelect').val();
      const stockStatus = $('#stockStatus').val();
      
      // 在实际应用中，这里会向后端发送请求获取数据
      console.log('查询条件:', {productName, category, supplier, stockStatus});
    });

    // 导出报表按钮事件
    $('#exportBtn').click(function() {
      Swal.fire({
        title: '导出库存报表',
        text: '确认要导出当前库存数据为Excel文件吗？',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: '确认导出',
        cancelButtonText: '取消'
      }).then((result) => {
        if (result.isConfirmed) {
          // 在实际应用中，这里会调用后端接口导出报表
          Swal.fire('导出成功', '库存报表已成功导出', 'success');
        }
      });
    });

    // 调整库存按钮事件
    $('.edit-stock').click(function() {
      const row = $(this).closest('tr');
      const productId = row.find('td:eq(1)').text();
      const productName = row.find('td:eq(2)').text();
      const currentStock = row.find('td:eq(6)').text();
      
      $('#productId').val(productId);
      $('#productNameModal').val(productName);
      $('#currentStock').val(currentStock);
      $('#adjustQuantity').val('');
      $('#adjustReason').val('purchase');
      $('#otherReasonGroup').hide();
      
      $('#adjustStockModal').modal('show');
    });

    // 调整原因变化事件
    $('#adjustReason').change(function() {
      if ($(this).val() === 'other') {
        $('#otherReasonGroup').show();
      } else {
        $('#otherReasonGroup').hide();
      }
    });

    // 保存调整按钮事件
    $('#saveAdjustment').click(function() {
      const productId = $('#productId').val();
      const adjustQuantity = $('#adjustQuantity').val();
      const adjustReason = $('#adjustReason').val();
      const otherReason = $('#otherReason').val();
      
      if (!adjustQuantity) {
        Swal.fire('错误', '请输入调整数量', 'error');
        return;
      }
      
      // 在实际应用中，这里会向后端发送请求保存库存调整记录
      console.log('调整库存:', {productId, adjustQuantity, adjustReason, otherReason});
      
      Swal.fire('调整成功', '库存已成功调整', 'success');
      $('#adjustStockModal').modal('hide');
    });
  });
</script>
</body>
</html>